<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>xxx</title>
<link href="${pageContext.request.contextPath}/jsp/shiro/manager/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/jsp/shiro/manager/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/jsp/shiro/manager/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jsp/shiro/manager/grid.locale-cn.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jsp/shiro/manager/jquery.jqGrid.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jsp/shiro/manager/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jsp/shiro/manager/easyui.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/shiro/manager/jquery.easyui.min.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/shiro/manager/easyui-lang-zh_CN.js" charset="utf-8"></script> <!-- 中文化，如果不中文化，则为ok和cancel -->

</head>
<script type="text/javascript">
jQuery(document).ready(function(){
	//获取所有数据
	jQuery("#a1").click(function(){
		var rowIds = jQuery("#myTab").jqGrid('getDataIDs');//或者var rowIds = $("#myTab").getDataIDs();
		for(var i=0;i<rowIds.length;i++){
			var name=jQuery("#myTab").getRowData(rowIds[i]).name;
			alert(name);
		}
	});
	//获取选中行数据 
	jQuery("#a3").click(function(){
		var id= jQuery("#myTab").jqGrid('getGridParam','selrow');
		if (id) {
			var ret= jQuery("#myTab").jqGrid('getRowData',id);
			alert("id="+ret.id+"phone="+ret.phone+"name="+ret.name);
		} else { 
			alert("请选择一行！");
		}
	});
	//新增
	jQuery("#a4").click(function(){
		var datarow= {id:"99",phone:"123",name:"test3"};
		var su=jQuery("#myTab").jqGrid('addRowData',null,datarow);
		if(su) {
			alert("新增成功");
		} else {
			alert("新增失败");
		}
	});
	
	var username = ""; // 定义查询条件变量
	var	name = ""; // 定义查询条件变量
	jQuery("#myTab").jqGrid({
	    datatype:"json",//将这里改为使用JSON数据
	    url:'${pageContext.request.contextPath}/manage/getjqgrid',//这是Action的请求地址
	    mtype:'POST',
	    height:300,
	    width:900,
	    sortname:'id',//排序字段
	    sortorder:'asc',//升序还是降序
	    colNames:['编号','登录名','电话','姓名','年龄','家庭地址','创建时间','操作'],
	    colModel:[
	         {name:'id',index:'id',width:60,sorttype:"int",align:"center",sortable:true},
	         {name:'username',index:'username',width:90},
	         {name:'phone',index:'phone',width:100,sorttype:"int",align:"center",sortable:true},
	         {name:'name',index:'name',width:90},
	         {name:'age',index:'age',width:90},
	         {name:'address',index:'address',width:90},
	         {name:'createDate',index:'createDate',width:90},
	         {name:'operate',index:'operate',width:90,align:'center',formatter:function(cellValue, options, rowObject){
	        	 var ops = "";
	        	 
	        	 if (cellValue == '0') {
	        		 var op1 = "<img onclick='imgClick(\"" + options.rowId +"\",0)' src='../../Content/Images/Icon16/accept.png'/>";
	        		 ops = ops + op1;
	        	 }
                 if (cellValue == '1') {
                	 var op2 = "<img onclick='imgClick(\"" + options.rowId + "\",0)' src='../../Content/Images/Icon16/cross_shield.png'/>";
                	 ops = ops + op2;
                 }
	        	 
	        	 var detail1 = "<a href='javascript:void(0)' onclick='btn_detail(\""+ rowObject.id + "\")'' title='详情' style='padding:0px 10px'>详情</a>";
	        	 var detail2 = "<a href='javascript:void(0)' onclick='btn_delete(\""+ rowObject.id + "\")'' title='删除' style='padding:0px 10px'>删除</a>";
	        	 var detail3 = '<input type="checkbox" id="isFactorySendBox_'+rowObject.id+'" >';
	        	 ops = ops + detail1;
	        	 ops = ops + detail2;
	        	 ops = ops + detail3;
                 return ops;
	         }}
	     ],
	     postData:{'username':username,'name':name}, // 条件参数 post Data为后台 可获取参数传参，request.getParam()获取即可
	     jsonReader:{//从后台到前台的json格式，都是默认的值
			root:"rows",	// 数据，包含实际数据的数组
			page:"page",	// 当前页数
			total:"total",	// 总页数
			records:"records",	// 总记录数
			repeatitems:false,
			id:"id"
	     },
	     prmNames:{//传到后台的数据
			sort: "sidx",//表示用于排序的列名的参数名称 
			order:"ordx"//升序还是降序
	     },
	     pager:'pager',//分页工具栏
	     imgpath:'image/jqgrid',//图片路径
	     rowNum:10,//每页显示记录数
	     viewrecords: true,//是否显示行数
	     rowList:[10,20,30],//可调整每页显示的记录数
	     multiselect:false,//是否支持多选
	     autowidth: false,
	     caption:"jqGrid表格测试"
	});
	
});

function btn_detail(clid){
	$('#detail_dialog').dialog({
		title: '详情',
		width: 500,
		height: 220,
		closed: false,
		cache: false,
		href: '${pageContext.request.contextPath}/manage/getDetailData.action?userId=' + clid,
		modal: true
	});
}

function add(){
	$('#add_dialog').dialog({
		title: '新增',
		width: 400,
		height: 220,
		closed: false,
		cache: false,
		href: '${pageContext.request.contextPath}/manage/getAddData.action',
		modal: true
	});
}

function btn_delete(clid){
	$.messager.confirm("提示", "<br>是否确认删除该用户？", function(result) {
		$.ajax({
	        async: false,
	        type: "POST",
	        url:'${pageContext.request.contextPath}/manage/delUser.do?userId='+clid,
	        contentType : "application/x-www-form-urlencoded; charset=utf-8",
	        data:{},
	        dataType: "json",
	        success: function (data, textStatus) {
	       		if ("0000" == data.code) {
	       			$.messager.alert("提示", "<br>该用户删除成功！", "info", function (){ // icon四种设置："error"、"info"、"question"、"warning"
	       				$("#myTab").jqGrid('setGridParam',{
		           			datatype:'json',
		           			postData:{},
		           			page:1
		           		}).trigger("reloadGrid");
	       		    });
	       		}
	        },
	        error: function () {
	        	alert(222);
	        }
	    })
	})
	
	
}

function submitttt(){
	$("#poster_form").submit(function(){
	    $.ajax({
	        async: false,
	        type: "POST",
	        url:'${pageContext.request.contextPath}/manage/addUser.do',
	        contentType : "application/x-www-form-urlencoded; charset=utf-8",
	        data:$("#poster_form").serialize(),
	        dataType: "json",
	        success: function (data, textStatus) {
	       		// alert(data.code);
	        },
	        error: function () {
	        	alert(222);
	        }
	    })
	})
}

function query(){
	var username = $("#username").val();
	var name = $("#name").val();
 	$("#myTab").jqGrid('setGridParam',{
		datatype:'json',
		postData:{'username':username, 'name':name},
		page:1
	}).trigger("reloadGrid");
}

</script>
</head>
<body>
<input placeholder="输入登录名" value="" id="username">  <input placeholder="输入姓名" value="" id="name"> <input type="button" value="查询" onclick="query()"> <input type="button" value="新增" onclick="add()">
<table id="myTab" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll"></div>
<input type="button" id="a3" value="获取选中行数据">
<input type="button" id="a1" value="获取所有数据">
<input type="button" id="a4" value="新增">
<div id="add_dialog"></div>
<div id="detail_dialog"></div>
</body>
</html>